<template>
	<view>
		<u-tabs :list="tab" :is-scroll="true" bg-color="#DA7B36" active-color="#fff" inactive-color="#fff"
			:current="current" @change="changeTab"></u-tabs>
		<swiper class="swiper_container" :current="current" @change="changeSwiper">
			<swiper-item class="tuijian">
				<scroll-view scroll-y enable-flex>
					<!-- 开通会员卡 -->
					<view class="vip_card">
						<view class="card_top">
							<image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" mode="widthFix"></image>
							<image v-else src="/static/icons/avatar.png" mode="widthFix"></image>
							<view>
								<view v-if="userInfo.nickName">
									欢迎你，{{userInfo.nickName}}~
								</view>
								<view v-else>
									欢迎你，新朋友
								</view>
								<view>8元开通VIP，畅学名厨独家菜谱</view>
							</view>
							<view v-if="userInfo.vip" class="open" @click="open">
								续费
							</view>
							<view v-else class="open" @click="open">
								开通
							</view>
						</view>
						<view class="card_bottom">
							<view class="bottom_item">
								<view class="image_bg">
									<image src="/static/icons/medal.png"></image>
								</view>
								<view>名厨课程</view>
							</view>
							<view class="bottom_item">
								<view class="image_bg">
									<image src="/static/icons/noAD.png"></image>
								</view>
								<view>无广告打扰</view>
							</view>
							<view class="bottom_item">
								<view class="image_bg">
									<image src="/static/icons/diamond.png"></image>
								</view>
								<view>身份标识</view>
							</view>
						</view>
					</view>
					<!-- VIP最新推荐 -->
					<view v-if="userInfo.vip" class="menuList_box">
						<view class="menuList_title">
							VIP最新推荐
						</view>
						<view class="menuList_menu">
							<view class="menuList_menu_item" v-for="menu in newMenuData" :key="menu._id"
								@click="detail(menu._id)">
								<image :src="menu.coverpic" mode=""></image>
								<view class="menu_name">
									{{menu.name}}
								</view>
								<view class="menu_detail">
									<view>
										<text>{{menu.pageview}}</text>
										<image src="/static/icons/watch.png" mode=""></image>
									</view>
									<view>
										<text>{{menu.collections}}</text>
										<image src="/static/icons/collection.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 限时免费 -->
					<view v-if="userInfo" class="menuList_box">
						<view class="menuList_title">
							限时免费体验
						</view>
						<view class="menuList_menu">
							<view class="menuList_menu_item" v-for="menu in isFreeMenuData" :key="menu._id"
								@click="detail(menu._id)">
								<image :src="menu.coverpic" mode=""></image>
								<view class="menu_name">
									{{menu.name}}
								</view>
								<view class="menu_detail">
									<view>
										<text>{{menu.pageview}}</text>
										<image src="/static/icons/watch.png" mode=""></image>
									</view>
									<view>
										<text>{{menu.collections}}</text>
										<image src="/static/icons/collection.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 猜你喜欢 -->
					<view v-if="userInfo" class="menuList_box">
						<view class="menuList_title">
							猜你喜欢
						</view>
						<view class="likeMenu_menu">
							<view class="likeMenu_menu_item" v-for="menu in likeMenuData" :key="menu._id"
								@click="detail(menu._id)">
								<image :src="menu.coverpic" mode=""></image>
								<view class="menu_name">
									{{menu.name}}
								</view>
								<view class="menu_detail">
									<view>
										<text>{{menu.pageview}}</text>
										<image src="/static/icons/watch.png" mode=""></image>
									</view>
									<view>
										<text>{{menu.collections}}</text>
										<image src="/static/icons/collection.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 精品名厨 -->
					<view v-if="userInfo" class="menuList_box">
						<view class="menuList_title">
							精品名厨(会员专享)
						</view>
						<view class="menuList_menu">
							<view class="menuList_menu_item" v-for="menu in vipExclusive" :key="menu._id"
								@click="detail(menu._id)">
								<image :src="menu.coverpic" mode=""></image>
								<view class="menu_name">
									{{menu.name}}
								</view>
								<view class="menu_detail">
									<view>
										<text>{{menu.pageview}}</text>
										<image src="/static/icons/watch.png" mode=""></image>
									</view>
									<view>
										<text>{{menu.collections}}</text>
										<image src="/static/icons/collection.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>

				</scroll-view>
			</swiper-item>
			<swiper-item>暂无数据</swiper-item>
			<swiper-item>暂无数据</swiper-item>
			<swiper-item>暂无数据</swiper-item>
			<swiper-item>暂无数据</swiper-item>
			<swiper-item>暂无数据</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: [{
					name: "推荐"
				}, {
					name: "免费体验"
				}, {
					name: "小白入门"
				}, {
					name: "快手菜"
				}, {
					name: "家常菜"
				}, {
					name: "暂无数据"
				}],
				current: 0,
				newMenuData: [],
				isFreeMenuData: [],
				likeMenuData: [],
				vipExclusive: [],
				userInfo: null,
			}
		},
		methods: {
			async getRecommendMenuList() {
				uni.getStorage({
					key: 'token',
					success: async ({
						data
					}) => {
						const vipMenuList = await this.$api.member.getRecommendMenuList(data);
						const isFreeMenuList = await this.$api.member.getisFreeMenuList(data);
						const likeMenuData = await this.$api.member.likeMenu(data);
						const vipExclusive = await this.$api.member.vipExclusive(data);
						if (vipMenuList.meta.status == 200) {
							this.newMenuData = vipMenuList.menus;
							console.log(this.newMenuData);
						}
						if (isFreeMenuList.meta.status == 200) {
							this.isFreeMenuData = isFreeMenuList.menus;
						}
						if (likeMenuData.meta.status == 200) {
							this.likeMenuData = likeMenuData.menus;
						}
						if (vipExclusive) {
							this.vipExclusive = vipExclusive.menus;
						}
					}
				})
			},
			open() {
				uni.navigateTo({
					url: '/pages/member/openMember'
				})
			},

			changeSwiper(event) {
				this.current = event.detail.current
			},
			changeTab(index) {
				this.current = index;
			},
			detail(id) {
				uni.navigateTo({
					url: `/pages/menuDetail/menuDetail?id=${id}`
				})
			}

		},
		onLoad() {
		},
		onShow() {
			this.userInfo = getApp().globalData.userInfo;
			this.getRecommendMenuList();
		}
	}
</script>

<style lang="scss">
	.swiper_container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		height: calc(100vh - 92rpx);

		.tuijian {
			overflow: auto;
		}

		.vip_card {
			position: relative;
			width: 700rpx;
			height: 300rpx;
			border-radius: 20rpx;
			overflow: hidden;
			background: #272830;
			margin: 20rpx auto;

			.card_top {
				display: flex;
				position: relative;
				align-items: center;
				margin: 20rpx;

				image {
					border-radius: 50%;
					width: 120rpx;
				}

				>view {
					>view {

						&:first-child {
							color: #ccc;
							margin: 20rpx;
						}

						&:last-child {
							color: #fff;
							margin: 20rpx;
						}
					}
				}

				.open {
					position: absolute;
					top: 0;
					right: 0;
					padding: 0 30rpx;
					border-radius: 50rpx;
					background: #F0CFB4;
				}
			}

			.card_bottom {
				width: 100%;
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: space-around;
				background: linear-gradient(to bottom, #010101, #4C4C4C);
				border-radius: 20rpx;

				.bottom_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 10rpx 0;
					color: #ECC5A9;

					.image_bg {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background: #EBC4A7;
						margin: 10rpx 0;

						image {
							width: 100%;
							height: 100%;
						}
					}


				}
			}
		}

		.menuList_box {
			margin-left: 25rpx;

			.menuList_title {
				font-size: 36rpx;
				font-weight: 600;
			}

			.menuList_menu {
				width: 725rpx;
				margin: 20rpx 0;
				display: flex;
				overflow: auto;

				.menuList_menu_item {
					margin-right: 20rpx;

					>image {
						width: 300rpx;
						height: 180rpx;
						border-radius: 20rpx;
					}

					.menu_name {
						font-size: 30rpx;
						font-weight: 600;
					}
				}

				.menu_detail {
					display: flex;

					>view {
						display: flex;
						align-items: center;

						text {
							font-size: 30rpx;
							color: #ccc;
						}

						image {
							margin: 0 10rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}

			.likeMenu_menu {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.likeMenu_menu_item {
					margin-right: 25rpx;

					>image {
						width: 330rpx;
						height: 220rpx;
						border-radius: 20rpx;
					}

					.menu_name {
						font-size: 30rpx;
						font-weight: 600;
					}
				}

				.menu_detail {
					display: flex;

					>view {
						display: flex;
						align-items: center;

						text {
							font-size: 30rpx;
							color: #ccc;
						}

						image {
							margin: 0 10rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}
	}
</style>
